<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动Bug问题</title>
		<link rel="stylesheet" href="css/浮动Bug.css" />
	</head>
	<body>
		<!-- 元素添加浮动之后，页面结构是元素套元素，一定会出问题
		 ①浮动塌陷:
		 产生原因：页面元素一定嵌套，父元素没有设定高度，子元素浮动
		 解决方案1：找到没有高度的父元素加高度   （经验）
		 解决方案2：父元素加溢出，按照子元素宽高进行溢出处理   （推荐）
		               overflow：hidden；
					   
					   
					   
		 ②浮动卡住：
		 产生原因：父元素宽度不够，子元素高度高于其他子元素  
		 解决方案1：【效果左右布局---浮动】给父元素加宽 （经验）
		           
		解决方案2：【效果两列布局---浮动】找到卡住的元素，添加清除浮动 （推荐）	   
				   
		 -->
		 <div id="father">
		 	<div class="d1">🐒</div>
		 	<div class="d2">⭐</div>
		 	<div class="d3">💐</div>
		 	<div class="d4">🐕</div>
		 	<div class="d5">🐟</div>
		 </div>
	</body>
</html>